<template>
  <div id="container">
    <!-- 头部区域 -->
    <div class="nav">
      <a href="javascript:void(0);">
        <img src="../../assets/images/Login/logo.jpg" />
      </a>
    </div>
    <!-- 表单区域 -->
    <div class="content">
      <div class="form" id="form">
        <el-form :model="loginForm" ref="loginForm" class="form_item" v-show="isAcc">
          <div class="form_txt">
            <a href="javascript:void(0);" class="form_acc togther">账号登录</a>
            <div class="fuhao">|</div>
            <div class="code">
              <a
                href="javascript:void(0);"
                id="code"
                class="form_pas togther"
                @click="codeDisplay"
              >扫码登录</a>
            </div>
          </div>
          <el-form-item prop="username">
            <el-input class="input" v-model="loginForm.username" placeholder="邮箱/手机号码/小米ID"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="密码" type="password"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button @click="login">登录</el-button>
          </el-form-item>
          <div class="footer">
            <a href class="footer_login_met">手机短信登录/注册</a>
            <a href="javascript:void(0);" class="footer_res register" @click="toRegister">立即注册</a>
            <div class="fuhao">|</div>
            <a href="javascript:void(0);" class="footer_res reset" @click="toRset">忘记密码？</a>
          </div>
          <div class="footer_tip">
            ——————— 其他方式登录 ———————
            <div class="footer_item">
              <a
                target="blank"
                href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101477621&redirect_uri=https%3A%2F%2Fsso.e.qq.com%2Fpassport%3Fservice_tag%3D14%26sso_redirect_uri%3Dhttps%253A%252F%252Fadnet.qq.com%252F&scope=get_user_info"
                class="iconfont icon-QQ icon1"
              ></a>
              <a
                target="blank"
                href="https://api.weibo.com/oauth2/authorize?response_type=code&client_id=2996826273&redirect_uri=https://sns.account.xiaomi.com/pass/sns/login/load&state=STATE_872548"
                class="iconfont icon-weibo1 icon2"
              ></a>
              <a
                target="blank"
                href="https://auth.alipay.com/login/express.htm?goto=https%3A%2F%2Fmemberexprod.alipay.com%3A443%2Fauthorize%2FuserAuthQuickLoginAction.htm%3Fe_i_i_d%3D92bd564d192c8f48713e95c9ecbac184"
                class="iconfont icon-zhifubao icon3"
              ></a>
              <a
                target="blank"
                href="https://open.weixin.qq.com/connect/qrconnect?appid=wxa21de3acc0d5e79b&redirect_uri=https%3A%2F%2Fsns.account.xiaomi.com%2Fpass%2Fsns%2Flogin%2Fload&response_type=code&scope=snsapi_login&state=STATE_615314#wechat_redirect"
                class="iconfont icon-weixin icon4"
              ></a>
            </div>
          </div>
        </el-form>
        <el-form class="form_code" v-show="isCode">
          <div class="head">
            <a href="javascript:void(0);" class="form_code_acc togther" @click="accDisplay">账号登录</a>
            <div class="fuhao">|</div>
            <a href class="form_code_pas togther">扫码登录</a>
          </div>
          <img src="../../assets/images/Login/code.jpg" />
          <div class="tip1">
            使用
            <div class="red_tip">小米商城APP</div>扫一扫
          </div>
          <div class="tip2">小米手机可打开「设置」>「小米帐号」扫码登录</div>
        </el-form>
      </div>
      <!-- 底部区域 -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from '@/components/content/LoginFooter/LoginFooter'

import { getUserInfo } from '@/components/network/Login/login.js'
export default {
  components: {
    Footer
  },
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: '111111'
      },
      isAcc: true,
      isCode: false,
      isLogin: false
    }
  },
  created() {
    this.keyupSubmit()
  },
  methods: {
    // 点击回车触发按钮
    keyupSubmit() {
      document.onkeydown = e => {
        const _key = window.event.keyCode
        if (_key === 13) {
          this.login()
        }
      }
    },
    // 显示扫码界面
    codeDisplay() {
      this.isAcc = false
      this.isCode = true
    },
    // 显示张账号界面
    accDisplay() {
      this.isAcc = true
      this.isCode = false
    },
    // 去注册界面
    toRegister() {
      this.$router.push('/register')
    },
    toRset() {
      this.$router.push('/rest')
    },
    async login() {
      const username = this.loginForm.username
      const password = this.loginForm.password
      if (!(username && password)) {
        this.$message.warning('请输入账号或者密码！')
      } else {
        const res = await getUserInfo()
        // console.log(res)
        for (let i = 0; i < res.length; i++) {
          if (res[i].username === username) {
            if (res[i].password === password) {
              window.sessionStorage.setItem('token', res[i].token)
              this.isLogin = true
            }
          }
        }
        if (!this.isLogin) {
          return this.$message.error('账号或者密码错误！')
        }
        this.$message.success('登录成功！')
        window.sessionStorage.setItem('username', username)
        this.$router.push('/home')
      }
    }
  }
}
</script>
<style scoped>
body {
  min-width: 1226px;
}
#container {
  width: 100%;
  height: 100%;
}
.nav {
  width: 1130px;
  margin: 0 auto;
}
.nav a {
  width: 200px;
  height: 98px;
}
.content {
  height: 700px;
  width: 100%;
  background: url(../../assets/images/Login/background.jpg) no-repeat;
  background-position: top center;
  padding-top: 30px;
}
.content .form {
  height: 558px;
  width: 410px;
  min-width: 410px;
  background-color: #fff;
  margin-left: 58.5%;
}
.content .form .form_code .head {
  margin: 0px 20px;
  height: 80px;
  align-items: center;
  font-size: 24px;
  color: #ccc;
  display: flex;
  justify-content: space-around;
}
.content .form .form_code .head .form_code_acc {
  color: #666;
}
.content .form .form_code .head .form_code_pas {
  color: #ff6700;
}
.content .form .form_code img {
  display: block;
  margin: 100px auto;
  margin-bottom: 20px;
}
.content .form .form_code .tip1 {
  font-size: 14px;
  color: #666;
  height: 14px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .form .form_code .tip2 {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-top: 5px;
}
.content .form .form_code .tip1 .red_tip {
  color: red;
  margin: 0 10px;
}
.content .form .form_item {
  padding: 0 30px;
}
.content .form .form_item .form_txt {
  margin: 0px 20px;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  color: #ccc;
}
.content .form .form_item .form_txt .code {
  color: #ccc;
}
.content .form .form_item .form_txt .togther {
  color: #666;
}
.content .form .form_item .input {
  width: 100%;
  margin-bottom: 5px;
}
.btn .el-button {
  background: #ff6700;
  color: #fff;
  width: 352px;
  height: 50px;
}
.content .form .form_item .footer {
  padding: 10px 0;
  display: flex;
  font-size: 14px;
  color: #999;
}
.content .form .form_item .footer .fuhao {
  margin: 0 5px;
}
.content .form .form_item .footer a:hover {
  color: #ff6700;
}
.content .form .form_item .footer .footer_login_met {
  color: #ff6700;
  margin-right: 82px;
  width: 118px;
}
.content .form .form_item .footer .footer_res {
  color: #999;
}
.content .form .form_item .footer .register {
  width: 56px;
}
.content .form .form_item .footer .reset {
  width: 70px;
}
.content .form .form_item .footer_tip {
  margin-top: 100px;
  color: #ccc;
  font-size: 14px;
  text-align: center;
}
.content .form .form_item .form_txt .form_acc {
  color: #ff6700;
}
.content .form .form_item .form_txt a:hover {
  color: #ff6700;
}
.content .form .form_item .footer_tip .footer_item {
  display: flex;
  margin-top: 10px;
  justify-content: space-around;
}
</style>
